<template>
  <div class="echarts">
    <div id="container1"></div>
  </div>
</template>
 
<script setup lang="ts">
import * as echarts from 'echarts'
import axios from 'axios'
import { ref, watch, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

const goback = () => {
  window.history.back()
}

watch(() => store.state.devicesCostCategory, () => {
  updateChart()
})

var myChart
const updateChart = () => {
  var option
  //构建电费结构横向柱状图的标签颜色对象
  var createLabelColor = (fontColor,leftColor,rightColor)=>{
    return {align: 'center',color:fontColor,backgroundColor: {
        type: 'linear',x: 0,y: 0,x2: 1,y2: 1,colorStops: [{
          offset: 0, color: leftColor // 起始颜色
        }, {
          offset: 1, color: rightColor // 结束颜色（透明）
        }]
      }}
  }

  myChart.setOption((option = makeOption()))
  function makeOption() {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '',
        right: 45*window.innerWidth/1920,
        bottom: 30*window.innerWidth/1920,
        top: 20*window.innerWidth/1920,
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          boundaryGap: false ,
          axisLabel:{
            color:'#FCF8F8'
          },
          axisLine: {
            show: false, // 隐藏坐标轴轴线
          },
          axisTick: {
            show: false, // 隐藏坐标轴刻度
          },
          splitLine: {
            show: true, // 显示坐标轴分隔线
            lineStyle: {
              type: 'dashed', // 设置分隔线为虚线
              opacity: 0.1// 透明度 10%
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'category',
          axisLine: {
            show: false, // 隐藏坐标轴轴线
          },
          axisTick: {
            show: false, // 隐藏坐标轴刻度
          },
          axisLabel: {
            // show: true,
            margin: 35,
            textStyle: {
              height: 34*window.innerWidth/1920,
              width: 94*window.innerWidth/1920,
              fontSize:16*window.innerWidth/1920,
              fontFamily:'微软雅黑',
              borderRadius: [5, 5, 5, 5],
            }
            // inside: true // 刻度文字朝内显示
          },
          data: [
            {value:'电量电费',textStyle:createLabelColor('rgba(53, 240, 252, 1)','rgba(53, 240, 252, 0.2)','rgba(9, 32, 38, 0.2)')},
            {value:'基本电费',textStyle:createLabelColor('rgba(29, 247, 186, 1)','rgba(29, 247, 186, 0.2)','rgba(9, 32, 38, 0.2)')},
            {value:'力调电费',textStyle:createLabelColor('rgba(254, 220, 34, 1)','rgba(233, 158, 66, 0.2)','rgba(9, 32, 38, 0.2)')},
            {value:'附加电费',textStyle:createLabelColor('rgba(10, 167, 254, 1)','rgba(10, 167, 254, 0.2)','rgba(9, 32, 38, 0.2)')}
          ]
        }
      ],
      series: [
        {
          type: 'bar',
          stack: 'Total',

          barWidth: '10%',
          // barGap: '-100%', // 设置柱条之间的间距
          label: {
            show: true,
            color: "#fff",
            fontSize: 14*window.innerWidth/1920,
            padding: [0,0,16,0],
            position: 'insideBottomRight', // 设置标签显示位置为顶部
          },
          emphasis: {
            focus: 'series'
          },
          itemStyle: {
            borderRadius: [5, 5, 5, 5], // 设置柱子两端为圆角
          },
          showBackground: true,
          backgroundStyle:{ //主条背景色
            color: '#fff',
            opacity: 0.1// 透明度 10%
          },
          data: [
            {value:store.state.devicesCostCategory.quantityCost,itemStyle:{color:'#33D7E1'}},
            {value:store.state.devicesCostCategory.fundamentalCost,itemStyle:{color:'#1EDCA8'}},
            {value:store.state.devicesCostCategory.adjustedCost,itemStyle:{color:'#E0C625'}} ,
            {value:store.state.devicesCostCategory.attachedCost,itemStyle:{color:'#0AA7FE'}} ]
        }
      ],
      graphic: [
        {
          type: 'text',
          left: 800*window.innerWidth/1920,
          top: 18*window.innerWidth/1920,
          zlevel: 10,
          style: {
            text: '总电费：'+store.state.devicesCostCategory.totalCost.toFixed(2)+'元',
            width: 150*window.innerWidth/1920,
            overflow: 'break',
            fill: 'rgba(61, 254, 252, 1)',
            textAlign : "left",
            fontSize: 14*window.innerWidth/1920,
            fontFamily: "微软雅黑"
          }
        }
      ]
    }
  }

  console.log("window.innerWidth:"+window.innerWidth)

  option && myChart.setOption(option)
}
const dotChart = () => {

  myChart =echarts.init(document.getElementById('container1'))
  updateChart()


}


onMounted(() => {
  dotChart()
})


</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.echarts {
  height: 100%;
  padding: 0 5px;

  &>div {
    height: 100%;
    width: 100%;

    :deep(canvas) {
      height: 100% !important;
      width: 100% !important;
    }
  }
}
</style>